import './Park_cockpit.scss'
import '../../static/font/iconfont.css'
import { useEffect } from 'react'
import Charts1 from './Charts1'
import Charts2 from './Charts2'
import Charts3 from './Charts3'
import Charts4 from './Charts4'

const Park_cockpit = () => {

// 普通函数


// 钩子函数
    useEffect(() => {
        let shu = 0;
        let dong2 = 0;
        let myinterval = setInterval(() => {
            let tu = document.querySelector(".xia2>div:nth-child(1)>div");
            shu = shu + 10;
            tu.style.transform = `rotateZ(${shu}deg)`
        }, 600);
        let dong1 = setInterval(() => {
            let dong = document.querySelector('.dong>li:nth-child(1)');
            if(dong2<550){
                dong2++;
                dong.style.marginTop = `-${dong2}px`

            }
            // dong.style.transform = `translateY(-${dong2}px)`
        }, 100);
        return ()=>{
            console.log('组建销毁，删除定时器');
            clearInterval(myinterval);
            clearInterval(dong1);
        }

    }, [])

    return (
        <div className='Park_cockpit'>
            <div className="bj">
                <div></div>
                <div className='nr'>
                    <div>
                        <div className='nr_1'>
                            <div className='shang'>
                                <div>
                                    <div></div>
                                    <h3>访客情况监测(月度)</h3>
                                </div>
                                <div>
                                    <span>更多</span>
                                    <span className='iconfont icon-a-50gengduo'></span>
                                </div>
                            </div>
                            <div className='xia'>
                                <div>
                                    <p className='iconfont icon-a-31liuliangjiankong'></p>
                                    <div>
                                        <p>21625</p>
                                        <p>访客数量统计(人次)</p>
                                    </div>
                                </div>
                                <div>
                                    <div className='zhuzhuang'>
                                        <span>A1幢写字楼</span>
                                        <div>
                                            <div></div>
                                        </div>
                                        <span>98%</span>
                                    </div>
                                    <div className='zhuzhuang'>
                                        <span>A1幢写字楼</span>
                                        <div>
                                            <div></div>
                                        </div>
                                        <span>98%</span>
                                    </div>
                                    <div className='zhuzhuang'>
                                        <span>A1幢写字楼</span>
                                        <div>
                                            <div></div>
                                        </div>
                                        <span>98%</span>
                                    </div>
                                    <div className='zhuzhuang'>
                                        <span>A1幢写字楼</span>
                                        <div>
                                            <div></div>
                                        </div>
                                        <span>98%</span>
                                    </div>
                                    <div className='zhuzhuang'>
                                        <span>A1幢写字楼</span>
                                        <div>
                                            <div></div>
                                        </div>
                                        <span>98%</span>
                                    </div>

                                </div>
                            </div>
                            <div className='xia1'>
                                <p>企业访客活跃度排行</p>
                            </div>
                        </div>
                        <div className='nr_1'>
                            <div className='shang'>
                                <div>
                                    <div></div>
                                    <h3>园区产业分布</h3>
                                </div>
                            </div>
                            <div className='xia2'>
                                <div>
                                    <p>
                                        <span>产业</span>
                                        <span>分布</span>
                                    </p>
                                    <div>
                                        <Charts1 />
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        <div></div>
                                        <span>第一产业</span>
                                        <span>234.3</span>
                                    </div>
                                    <div>
                                        <div></div>
                                        <span>第二产业</span>
                                        <span>234.3</span>
                                    </div>
                                    <div>
                                        <div></div>
                                        <span>第三产业</span>
                                        <span>234.3</span>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div className='nr_1'>
                            <div className='shang'>
                                <div>
                                    <div></div>
                                    <h3>物业费收款情况</h3>
                                </div>
                            </div>
                            <div className='xia3'>
                                <Charts2 />
                            </div>

                        </div>
                    </div>
                    <div>
                        <div className='nr_1'>
                            <p>
                                当前园区总收入
                            </p>
                            <p>
                                15,092,346<span>元</span>
                            </p>
                        </div>
                        <div className='nr_1'>
                            <div className='qst'>资金收入趋势图</div>
                            <div className='xia4'>
                                <Charts4 />
                            </div>
                        </div>

                    </div>
                    <div>
                        <div className='nr_1'>
                            <div className='shang'>
                                <div>
                                    <div></div>
                                    <h3>园区能耗排行(月度)</h3>
                                </div>
                            </div>
                            <div className='xia5'>
                                <div>
                                    <span>区域</span>
                                    <span>总电量</span>
                                    <span>功率因数</span>
                                </div>
                                <ul className='dong'>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>
                                    <li>
                                        <span>华北区域</span>
                                        <span>12000kW.h</span>
                                        <span>85.5%</span>
                                    </li>


                                </ul>
                            </div>
                        </div>

                        <div className='nr_1'>
                            <div className='shang'>
                                <div>
                                    <div></div>
                                    <h3>实时监控画面</h3>
                                </div>
                                <div>
                                    <span>更多</span>
                                    <span className='iconfont icon-a-50gengduo'></span>
                                </div>
                            </div>

                            <div className='xia6'>
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>

                        <div className='nr_1'>
                            <div className='shang'>
                                <div>
                                    <div></div>
                                    <h3>设备故障监测</h3>
                                </div>
                            </div>
                            <div className='xia7'>
                                <Charts3 />
                            </div>
                        </div>
                    </div>
                </div>
                <div></div>
            </div>
        </div>
    )
}

export default Park_cockpit;